<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom:0px;height: 56px;">
			<el-form :inline="true">
				<el-form-item>
				 	<el-button type="warning" @click.native="emitJumpPage">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<tree-table :columns="columns" :tree-structure="true" :data-source="serviceDepts" v-loading="serviceDeptsLoading" element-loading-text="拼命加载中" class="svgDept-list" @jump-detail-update="fnJumpToComponent"></tree-table>
	</section>
</template>

<script>
	import TreeTable from '../treeTable/TreeTable.vue'
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				//列名
				columns: [
			          	{
			            	text: '办理事项',
			            	dataIndex: 'Title'
			          	},
			          	{
			            	text: '位置',
			            	dataIndex: 'Location'
			         	},
			          	{
			            	text: '路电',
			            	dataIndex: 'Phone1'
			          	},
			          	{
			            	text: '市电',
			            	dataIndex: 'Phone2'
			          	}
			    	],
			    serviceDepts : [],
			    serviceDeptsLoading : false
			}
		},
		components:{
			'tree-table' : TreeTable
		},
		methods: {
			//自定义事件->组件跳转
			emitJumpPage(){
				this.$emit('jump-page',0,'detail')
			},
			//自定义方法->从tabletree组件向父级传递参数id，并跳转至详细页
			fnJumpToComponent(id,nextComponent){
				this.$emit('jump-page',id,nextComponent)
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
			//获取办理事项
			fnGetBuilding(){
				var that = this
				that.serviceDeptsLoading = true
	            Svc.fnGetData('/api/guide/list',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		if (res.body.Data) {
	            			that.serviceDepts = res.body.Data
	            		}
	            		that.serviceDeptsLoading = false
	            	} else {
	            		that.openMessage("办理事项获取失败！" + res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			}
		},
		mounted() {
			//获取办理事项
			this.fnGetBuilding()
		}
	}
</script>

<style scoped>
	.svgDept-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
</style>